<template>
  <div class="msgContainer">
    <el-collapse-transition>
    <el-card v-show="show" class="box-card">
      <div slot="header" class="clearfix">
        <table style="width: 100%">
          <tr>
            <td>
              <el-upload
                class="avatar-uploader"
                :action="this.$common.getApiUrl(this.$common.ELE_MONKEY_SERVER_URL.BASE, this.$common.ELE_MONKEY_API.UPLOAD_FILE)"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeAvatarUpload1">
              <span style="float: left;"><img :src="this.$common.getResourceUrl(user.image)" class="avatar"></span>
              </el-upload>
            </td>
            <td>
              <el-button type="success" @click="updateUser" plain round>更换头像</el-button>
            </td>
          </tr>
        </table>
      </div>
      <div class="text item">
        <el-form label-position="left" label-width="100px" :model="user">
          <el-form-item label="用户名">
            <el-input v-model="user.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="user.identity.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input v-model="user.identity.idCardNumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="user.createTime" disabled></el-input>
          </el-form-item>
          <el-form-item label="修改时间">
            <el-input v-model="user.lastModifiedTime" disabled></el-input>
          </el-form-item>
            <el-form-item  label="身份证图片" prop="identity.idCardPic">
                <img v-if="imageUrl" :src="imageUrl" class="avatarIdcard">
            </el-form-item>
        </el-form>
      </div>
    </el-card>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: 'MerchantMsg',
  created () {
    this.getUser(this.$store.state.merchantUser.id)
  },
  data () {
    return {
      user: {},
      show: false,
      imageUrl: ''
    }
  },
  methods: {
    getUser (userId) {
      this.$merchantAPI.user_msg(userId).then((params) => {
        this.user = params.data
        this.imageUrl = this.$common.getResourceUrl(this.user.identity.idCardPic)
        setTimeout(() => {
          this.show = true
        }, 100)
      }).catch((params) => {
      })
    },
    updateUser () {
      this.$merchantAPI.user_update(this.user).then((params) => {
        this.user = params.data
        this.$store.state.merchantUser.image = this.user.image
        this.$alert(params.message)
      }).catch((params) => {
      })
    },
    handleAvatarSuccess (res, file) {
      this.user.identity.idCardPic = res
      this.imageUrl = URL.createObjectURL(file.raw)
      this.$alert('上传成功')
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG / PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleAvatarSuccess1 (res, file) {
      this.user.image = res
      this.$alert('上传成功')
    },
    beforeAvatarUpload1 (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG / PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .box-card:hover{
    top: -10px;
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 600px;
    position: relative;
    border-radius: 10%;
    top: 0;
  }

  .avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
  }

  .avatar-box {
    width: 100%;
    margin: 22px 0;
  }

  .avatarIdcard {
    width: 250px;
    height: 120px;
    border-radius: 10px;
    box-sizing: border-box;
    display: block;
  }

  .upload-tips-box {
    width: 250px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8c939d;
  }

  .msgContainer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
